<template>
  <div class="main">
    <div class="service">
      <div class="service-total">
        <template v-if="mode === 'service'">
          <h1>服务期</h1>
          <div class="time start-time">
            <i class="iconfont icon-kaishiriqi"></i>
            <span>开始时间：</span>
            <span class="start-run">{{ start_time }}</span>
          </div>
          <div class="time end-time">
            <i class="iconfont icon-jiezhiriqi"></i>
            <span>结束时间：</span>
            <span class="end-run">{{ end_time }}</span>
          </div>
        </template>
        <template v-else>
          <h1>试用版</h1>
          <span class="use-time">
            服务期：{{ start_time }} 至 {{ end_time }}
          </span>
        </template>
      </div>
      <div class="content">
        <div class="img">
          <img src="@/assets/images/people.png" alt="" />
        </div>
        <span class="need-up">如需购买或升级，请联系我们</span>
        <div class="detailInfo">
          <div>
            <i class="el-icon-phone-outline"></i>
            <span>服务热线</span>
          </div>
          <div>{{ phone_number }}</div>
        </div>
        <div class="detailInfo">
          <div>
            <i class="el-icon-message"></i>
            <span>客服邮箱</span>
          </div>
          <div>{{ email }}</div>
        </div>
      </div>
    </div>
    <div class="capacity">
      <h2>系统容量</h2>
      <div class="capacity-content">
        <el-row :gutter="14">
          <el-col
            :md="12"
            :lg="8"
            :xl="6"
            v-for="item in countList"
            :key="item.title"
          >
            <CountCard :detailInfo="item" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import CountCard from "@/components/systemtools/CountCard";
import { getBase, getCount } from "@/http/api";
import dayjs from "dayjs";
export default {
  name: "main",
  components: { CountCard },
  async mounted() {
    let tenant_id = JSON.parse(localStorage.getItem("userInfo") || "").tenant_id
    let res = await getBase(tenant_id);
    if (res.code === 20041) {
      for (const key in res.data) {
        this[key] = res.data[key];
      }
      this.start_time = dayjs(this.start_time).format("YYYY-MM-DD")
      this.end_time = dayjs(this.end_time).format("YYYY-MM-DD")
    }
    res = await getCount(tenant_id)
    if(res.code === 20041) {
      this.countList[0].used = res.data
    }
  },
  data() {
    return {
      start_time: "",
      end_time: "",
      phone_number: "",
      email: "",
      mode: "",
      countList: [
        {
          title: "用户量",
          total: 100,
          used: 0,
        },
        {
          title: "应用数",
          total: "无限制",
          used: "237",
        },
        {
          title: "附件上传容量",
          total: "120G",
          used: "1G",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  .service {
    width: 308px;
    padding: 36px 0 0;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    .service-total {
      width: 252px;
      h1 {
        margin-bottom: 24px;
        color: #1f2329;
        font-size: 20px;
        font-weight: 500;
      }
      & > * {
        margin-bottom: 24px;
      }
      .time i {
        padding-right: 7px;
      }
      .use-time {
        display: block;
        font-size: 14px;
        color: #646a73;
        margin-bottom: 50px;
      }
    }
    .content {
      width: 100%;
      background-image: linear-gradient(#fcfdff, #e1eafd);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 35px;
      .img {
        width: 100%;
        border-bottom: 1px solid #100f0d;
        display: flex;
        justify-content: center;
        img {
          height: 160px;
        }
      }
      .need-up {
        padding: 35px 0;
      }
      .detailInfo {
        width: 80%;
        padding-bottom: 24px;
        font-size: 14px;
        span {
          display: inline-block;
          padding: 0 0 14px 12px;
        }
        & > div:last-child {
          text-indent: 25px;
        }
        i {
          font-size: 20px;
          transform: translateY(2px);
        }
      }
    }
  }
  .capacity {
    margin-left: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    h2 {
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 15px;
      color: #646a73;
    }
  }
}
</style>
